<template>
    <div class="container">
        <ul class="movie">
            <li class="movie-item"  :class="{active:active=='now'}" @click="handlerToTab('now')">正在热映</li>
            <li class="movie-item"  :class="{active:active=='coming'}" @click="handlerToTab('coming')">即将热映</li>
        </ul>
        <router-view/>
    </div>
</template>

<script>
export default {
    data() {
        return  {
            active:""
        }
    },
    watch:{
        "$route": {
            handler(route) {
                this.active = route.meta.active ;
             
            },
            immediate:true,
            deep:true
        }
        
    },
    methods:{
        handlerToTab(name) {
            this.$router.push({
                name
            })
        }
    }
};
</script>

<style scoped lang="less">
.container {
    padding-top:3.125rem;
}
.movie {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 3.125rem;
    line-height:  3.125rem;
    background-color: black;
    color: white;
    list-style: none;
    &-item {
        flex: 1;
        text-align: center;
    }
}
.active {
    background-color: white;
    color: black;
}

</style>
